<template>
    <div class="info-container" :style="{ background: bgColor }">
        <img :src="icon" title="item" />

        <div class="info-desc">
            <span>{{ description }}</span>
            <span :style="{ color: color }">{{ num }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'BriefInfo',
        props: {
            icon: String,
            description: String,
            num: Number,
            bgColor: String,
            color: String,
        },
    };
</script>

<style lang="scss" scoped>
    div.info-container {
        display: inline-flex;
        flex-direction: row;
        margin-top: 48px;
        margin-left: 36px;
        width: 20.5%;
        height: 132px;
        border-radius: 28px;

        & > img {
            margin: 30px 36px 0;
            width: 70px;
            height: 70px;
        }

        & > .info-desc {
            display: flex;
            flex-direction: column;
            margin-top: 28px;

            span:first-of-type {
                font-size: 16px;
                font-weight: 400;
                color: rgba(0, 0, 0, .65);
                cursor: default;
            }

            span:last-of-type {
                font-size: 40px;
                font-weight: 700;
                font-family: "Microsoft YaHei", Arial, sans-serif;
                cursor: default;
            }
        }
    }
</style>
